<!--
  ~ This program is part of the OpenLMIS logistics management information system platform software.
  ~ Copyright © 2013 VillageReach
  ~
  ~ This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
  ~  
  ~ This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
  ~ You should have received a copy of the GNU Affero General Public License along with this program.  If not, see http://www.gnu.org/licenses.  For additional information contact info@OpenLMIS.org. 
  -->

<div ng-controller="UserRoleAssignmentController">
  <div class="fluid-grid">
    <div class="row-fluid fluid-grid-header">
      <div class="span3">
        <div class="fluid-grid-cell" openlmis-message="warehouse.header"></div>
      </div>
      <div class="span6">
        <div class="fluid-grid-cell" openlmis-message="create.user.role"></div>
      </div>
      <div class="span3">
        <div class="fluid-grid-cell">&nbsp;</div>
      </div>

      <div class="row-fluid" ng-repeat="roleAssignment in user.fulfillmentRoles" tab-scroll>
        <div class="span3">
          <div class="fluid-grid-cell">
            <label ng-bind="getWarehouseName(roleAssignment.facilityId)"></label>
          </div>
        </div>
        <div class="span7">
          <div class="fluid-grid-cell">
            <select ui-select2 ng-model="roleAssignment.roleIds" openlmis-message="placeholder.add.role"
                    ng-options="role.id as role.name for role in rolesMap.FULFILLMENT" multiple="multiple"
                    name="roles" class="full-width" id="roles">
            </select>
            <span ng-show="roleAssignment.roleIds.length == 0" class="field-error" openlmis-message="missing.value">
            </span>
          </div>
        </div>
        <div class="span2">
          <input type="button" class="btn delete-role" value="delete"
                 ng-click="deleteCurrentRow($index, 'fulfillmentRoles')" openlmis-message="button.remove"/>
        </div>
      </div>
    </div>

    <div class="add-role-row" tab-scroll>
      <div class="row-fluid">

        <div class="span3">
          <div class="fluid-grid-cell">
            <select
              ng-options="warehouse.id as warehouse.name for warehouse in availableWarehouses()"
              id="warehouseToSelect" ng-model="warehouseRole.facilityId">
              <option value="" openlmis-message="selectWarehouseMessage"></option>
            </select>
             <span ng-show='hasMappingError(warehouseRoleMappingError, warehouseRole.facilityId)' class="field-error"
                   openlmis-message="create.user.select.warehouse">
            </span>
          </div>
        </div>

        <div class="span7 select2-roles">
          <div class="fluid-grid-cell">
            <select ui-select2 ng-model="warehouseRole.roleIds"
                    ng-options="role.id as role.name for role in rolesMap.FULFILLMENT" class="full-width"
                    openlmis-message="placeholder.add.role" multiple="multiple">
            </select>
            <span ng-show='hasMappingError(warehouseRoleMappingError, warehouseRole.roleIds)' class="field-error"
                  openlmis-message="create.user.selectRoles">
            </span>
          </div>
        </div>

        <div class="span2">
          <div class="fluid-grid-cell">
            <input id="addFulfillmentRole" type="button" ng-click="addFulfillmentRole()"
                   class="btn btn-primary" openlmis-message="button.add"/>
          </div>
        </div>

      </div>
    </div>

  </div>
</div>
